<template>
    <div class="wrap" v-infinite-scroll="load">
        <div class="top" v-if="tenantId == 1">
            <div class="xyname">学校名称</div>
            <div class="xysearch">
                <el-select v-model="queryData.schoolId" filterable class="custom-input h-160" placeholder="请输入学校名称进行检索"
                    :loading="loading" @change="schoolIdChange">
                    <el-option v-for="item in options" :label="item.name" :value="item.id" />
                </el-select>
            </div>
            <div class="ssdq">所属省份</div>
            <div class="dqsearch">
                <el-select v-model="queryData.province" class="custom-input h-160" placeholder="请选择省份" filterable
                    default-first-option @change="provinceChange" clearable>
                    <el-option v-for="item in regionData" :label="item.label" :value="item.label" />
                </el-select>
            </div>
        </div>
        <div class="middle">
            <!-- 今日琴房数据 -->
            <div class="jrqfsj">
                <div class="jrtitle">今日琴房数据</div>
                <div ref="jrchart" class="jr-chart"></div>
                <div class="jrtotal">
                    <div class="jrnum">{{ jrqfData.total }}</div>
                    <div class="jrtext">琴房总数</div>
                </div>
            </div>
            <!-- 今日练琴数据 -->
            <div class="jrlqsj">
                <div class="jrtitle">今日练琴数据</div>
                <div class="lqlist">
                    <div class="lqitem"
                        style="background: linear-gradient(134deg, rgba(25, 137, 250, .1) 0%, rgba(201, 228, 255, .1) 100%);">
                        <div class="icon" style="background: #1989FA;"></div>
                        <div class="num" style="color:rgba(25, 137, 250, 1);">{{ commafy(jrlqData.yyy) }}</div>
                        <div class="status">已预约</div>
                    </div>
                    <div class="lqitem"
                        style="background: linear-gradient(134deg, rgba(255, 139, 29, .1) 0%, rgba(255, 226, 199, .1) 100%);">
                        <div class="icon" style="background: rgba(255, 139, 29, 1);"></div>
                        <div class="num" style="color:rgba(255, 139, 29, 1);">{{ commafy(jrlqData.jxz) }}</div>
                        <div class="status">进行中</div>
                    </div>
                    <div class="lqitem"
                        style="background: linear-gradient(134deg, rgba(46, 200, 237, .1) 0%, rgba(196, 244, 255, .1) 100%);">
                        <div class="icon" style="background: rgba(46, 200, 237, 1);"></div>
                        <div class="num" style="color:rgba(46, 200, 237, 1);">{{ commafy(jrlqData.ywc) }}</div>
                        <div class="status">已完成</div>
                    </div>
                    <div class="lqitem"
                        style="background: linear-gradient(134deg, rgba(255, 54, 54, .1) 0%, rgba(255, 199, 199, .1) 100%);">
                        <div class="icon" style="background: rgba(255, 54, 54, 1);"></div>
                        <div class="num" style="color:rgba(255, 54, 54, 1);">{{ commafy(jrlqData.ysy) }}</div>
                        <div class="status">已爽约</div>
                    </div>
                    <div class="lqitem"
                        style="background: linear-gradient(134deg, rgba(213, 38, 255, .1) 0%, rgba(244, 196, 255, .1) 100%);">
                        <div class="icon" style="background: rgba(213, 38, 255, 1);"></div>
                        <div class="num" style="color:rgba(213, 38, 255, 1);">{{ commafy(jrlqData.yqx) }}</div>
                        <div class="status">已取消</div>
                    </div>
                    <div class="lqitem"
                        style="background: linear-gradient(134deg, rgba(68, 213, 181, .1) 0%, rgba(200, 255, 243, .1) 100%);">
                        <div class="icon" style="background: rgba(68, 213, 181, 1);"></div>
                        <div class="num" style="color:rgba(68, 213, 181, 1);">{{ commafy(jrlqData.ljsc) }}</div>
                        <div class="status">累计时长</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="btitle">琴房一览</div>
            <div class="qfyl">
                <div class="qflist-wrap">
                    <div class="qfstatuslist">
                        <div v-for="(item, index) in  statusTexts " :key="index"
                            :class="selStatus == index ? `item active` : `item`" @click="changeStatus(index)">
                            {{ item }}
                        </div>
                    </div>
                    <div class="scroll-box">
                        <div class="qflist">
                            <div class="item" :style="'background-image: url(' + qfItemBgs[item.status] + ');'"
                                v-for="item in scrollData" :key="item.id">
                                <div class="room"
                                    :style="{ color: ['', 'rgba(1, 71, 79, 1)', 'rgba(151, 62, 6, 1)', 'rgba(70, 74, 136, 1)', 'rgba(48, 49, 51, 1)'][item.status] }">
                                    {{ item.typeName }} <span> ({{ getStatusText(item.status) }})</span>
                                </div>
                                <div class="building"
                                    :style="{ color: ['', 'rgba(70, 136, 137, 1)', 'rgba(188, 130, 90, 1)', 'rgba(99, 93, 155, 1)', 'rgba(96, 98, 102, 1)'][item.status] }">
                                    {{ `${item.buildingName} ${item.floor}F-${item.number}` }}
                                </div>

                                <div v-if="item?.user?.avatar" class="avatar"><img style="width: 100%;height: 100%;" :src="item?.user?.avatar"></div>
                                <div v-if="item?.user?.memberName" class="name">{{ item?.user?.memberName }}</div>
                                <div v-if="item?.user?.startTime" class="time">
                                    {{ formatTimeRange(item.user.startTime, item.user.keepTime) }}
                                </div>
                                <el-dropdown>
                                    <div class="icon el-dropdown-link"
                                        :style="'background-image: url(' + qfStatusImgs[item.status] + ');'"></div>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="lockRoom(item)">锁定</el-dropdown-item>
                                            <el-dropdown-item @click="closeRoom(item)">关闭</el-dropdown-item>
                                            <el-dropdown-item @click="openRoom(item)">远程开门</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                            <p class="data-empty" v-if="scrollData.length<=0">暂无数据</p>
                        </div>
                    </div>
                </div>
                <!-- <div class="bottom-page">
                    <el-pagination v-model:current-page="queryData.pageNo" v-model:page-size="queryData.pageSize"
                        :page-sizes="[20, 30, 40, 50]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div> -->
            </div>
        </div>
        <div v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.8)"></div>
    </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import * as echarts from 'echarts';
import qfStatusIconImg1 from '@/assets/imgs/qfdata/icon_more1.png';
import qfStatusIconImg2 from '@/assets/imgs/qfdata/icon_more2.png';
import qfStatusIconImg3 from '@/assets/imgs/qfdata/icon_more3.png';
import qfStatusIconImg4 from '@/assets/imgs/qfdata/icon_more4.png';
import qfItemBg1 from '@/assets/imgs/qfdata/itembg1.png';
import qfItemBg2 from '@/assets/imgs/qfdata/itembg2.png';
import qfItemBg3 from '@/assets/imgs/qfdata/itembg3.png';
import qfItemBg4 from '@/assets/imgs/qfdata/itembg4.png';

import { ElLoading } from 'element-plus'
import "element-plus/theme-chalk/el-loading.css"
import { useRoomDataApi } from "@/api/yxt/dashboard";
import { useSchoolApi } from "@/api/yxt/school";
import { union } from "lodash-es";
import { useConfirm, useMessage } from "@/components/Notice";
import { getTenantId } from "@/utils/auth";
import { regionData } from "element-china-area-data";

const qfStatusImgs = [null, qfStatusIconImg1, qfStatusIconImg2, qfStatusIconImg3, qfStatusIconImg4];
const qfItemBgs = [null, qfItemBg1, qfItemBg2, qfItemBg3, qfItemBg4];

defineOptions({ name: 'RoomData' })

const tenantId = getTenantId();

//今日琴房数据
const jrqfData = ref({
    kx: 0,
    sdz: 0,
    whz: 0,
    syz: 0,
    total: 0
})
//琴房一览渲染数组
const scrollData = ref([])
//查询条件
const queryData = ref<any>({
    schoolId: 0,
    province: '',
    status: undefined,
    pageNo: 1,
    pageSize: 20
});

const total = ref(0)
//今日练琴数据
const jrlqData = ref({
    yyy: 0, jxz: 0, ywc: 0, ysy: 0, yqx: 0, ljsc: 0
})

// 琴房一览数据 //状态(1:空闲 2:使用中 3:维护中 4:锁定中)
const qfylData = ref([])

// 切换琴房状态
async function changeStatus(index) {
    selStatus.value = index;
    queryData.value.status = index;
    queryData.value.pageNo = 1;
    await jrqfInit(queryData.value, false);
    scrollData.value = qfylData.value;
}

const roomDataApi = useRoomDataApi();
// 锁定
const lockRoom = (room: any) => {
    useConfirm("确认对该琴房进行锁定操作?", () => {
        roomDataApi.lock(room.id).then(() => {
            useMessage("锁定完成");
            jrqfInit(queryData.value, true);
        });
    })
}

// 关闭
const closeRoom = (room) => {
    useConfirm("确认对该琴房进行关闭操作?", () => {
        roomDataApi.close(room.id).then(() => {
            useMessage("请求已发送");
            jrqfInit(queryData.value, true);
        });
    })
}

// 远程开门
const openRoom = (room) => {
    useConfirm("确认对该琴房进行远程开门操作?", () => {
        roomDataApi.remote(room.id).then(() => {
            useMessage("请求已发送");
            jrqfInit(queryData.value, false);
        });
    })
}

const getStatusText = (status) => {
    return [null, '空闲', '使用中', '维护中', '锁定中'][status];
}
const statusTexts = ref(['全部', '空闲', '使用中', '维护中', '锁定中']);
const selStatus = ref(0);

//时间格式化
const formatTimeRange = (timestamp, duration) => {
    const start = dayjs(parseInt(timestamp));
    const end = start.add(duration, 'minutes');
    return `${start.format('HH:mm')}~${end.format('HH:mm')}`;
};
// 数字格式化
const commafy = (num) => {
    if (num) {
        const parts = num.toString().split('.');
        parts[0] = parts[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
        return parts.join('.');
    }
    return num;
};

const loading = ref(false)
const options = ref<any>([])

async function provinceChange() {
    queryData.value.pageNo = 1;
    await jrqfInit(queryData.value, true);
    scrollData.value = qfylData.value;
}

async function schoolIdChange() {
    queryData.value.pageNo = 1;
    await jrqfInit(queryData.value, true);
    scrollData.value = qfylData.value;
}

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
    jrqfInit(queryData.value, false);
}
const handleCurrentChange = (val: number) => {
    jrqfInit(queryData.value, false);
}

//自适应
const screenHeight = ref(window.innerHeight);
const setRem = () => {
    const danwei = (screenHeight.value - topeElHeight.value) / 1010;
    const html = document.querySelector("html");
    if (html) html.style.fontSize = danwei + "px";
};

const topeElHeight = ref(85);
const topElement = document.getElementById("topppp");
// 检查是否成功获取到DOM元素
if (topElement) {
    // 获取高度
    topeElHeight.value = topElement.clientHeight;
} else {
    console.error("无法获取 topElement 的 DOM 元素");
}

const jrchart = ref(null);
let myJrchart;
const myJrchartInit = () => {
    myJrchart = echarts.init(jrchart.value);
    myJrchart.setOption(myJrchartInitOption());
}
const myJrchartInitOption = () => {
    return {
        series: [
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['55%', '75%'],
                width: '100%',
                data: [
                    {
                        value: jrqfData.value.kx,
                        name: '空闲琴房',
                        itemStyle: { color: 'rgba(123, 141, 255, 1)' }
                    },
                    {
                        value: jrqfData.value.sdz,
                        name: '锁定中琴房',
                        itemStyle: { color: 'rgba(251, 228, 138, 1)' }
                    },
                    {
                        value: jrqfData.value.whz,
                        name: '维护中琴房',
                        itemStyle: { color: 'rgba(255, 168, 123, 1)' }
                    },
                    {
                        value: jrqfData.value.syz,
                        name: '使用中琴房',
                        itemStyle: { color: 'rgba(68, 213, 181, 1)' }
                    },
                ],
                itemStyle: {
                    borderColor: '#auto',
                    borderWidth: 0
                },
                label: {
                    width: 100,
                    alignTo: 'edge',
                    position: 'outer',
                    formatter: '{name|{b}}\n{time|{c}}',
                    minMargin: 20,
                    edgeDistance: '20%',
                    lineHeight: 25,
                    rich: {
                        name: {
                            fontSize: 12,
                            color: 'rgba(48, 49, 51, 1)',
                        },
                        time: {
                            fontSize: 16,
                            color: 'rgba(48, 49, 51, 1)',
                            fontWeight: 'bold'
                        },
                    },
                    truncate: false,
                    color: 'inherit'
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 90
                },
                labelLayout: (params) => {
                    const isLeft = params.labelRect.x < myJrchart.getWidth() / 2;
                    const points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                    return {
                        labelLinePoints: points
                    };
                },
            }
        ],
    }
}
const myJrchartUpdate = () => {
    myJrchart.setOption(myJrchartInitOption());
}

async function init() {
    //查询条件
    const queryData = ref({
        schoolId: undefined,
        province: '',
        status: undefined,
        pageNo: 1,
        pageSize: 20
    });
    await jrqfInit(queryData.value, true);
    scrollData.value = qfylData.value
    optionsInit();
}

//下拉框初始化
async function optionsInit() {
    const simpleList = await useSchoolApi().getSimpleList();
    options.value = union([{ id: 0, name: "全部" }], simpleList);
    queryData.value.schoolId = 0;
}

//今日琴房数据
async function jrqfInit(queryData: any, isRefreshTodayData: boolean) {
    console.log("isRefreshTodayData=="+isRefreshTodayData)
    const jrqfsj = await roomDataApi.getListByCondition(queryData);
    if(isRefreshTodayData) {
        jrqfData.value.total = jrqfsj.result.total;
        jrqfData.value.kx = jrqfsj.restRoom;
        jrqfData.value.syz = jrqfsj.useRoom;
        jrqfData.value.whz = jrqfsj.protectRoom;
        jrqfData.value.sdz = jrqfsj.lockRoom;
        jrlqData.value.jxz = jrqfsj.goingCount;
        jrlqData.value.yqx = jrqfsj.cancelCount;
        jrlqData.value.ysy = jrqfsj.brokenCount;
        jrlqData.value.ljsc = jrqfsj.totalDuration;
        jrlqData.value.yyy = jrqfsj.hasSubscribed;
        jrlqData.value.ywc = jrqfsj.finishCount;
    }
    qfylData.value = jrqfsj.result.list;
    total.value = jrqfsj.result.total;
    return jrqfsj;
}
//滑动加载更多
const isLoading = ref(false)

const load = async () => {
    if(scrollData.value.length < total.value && isLoading.value == false){
        isLoading.value = true
        queryData.value.pageNo+=1;
        await jrqfInit(queryData.value, false)
        scrollData.value = [...scrollData.value, ...qfylData.value];
        isLoading.value = false
    }
}


watch(jrqfData, () => {
    myJrchartUpdate();
}, { deep: true });

onMounted(async () => {
    init();
    setRem();
    myJrchartInit();

})
onUnmounted(() => {
    dispose();
});
// 销毁图表
const dispose = () => {
    myJrchart.dispose();
}
</script>
<style scoped lang="scss">
.wrap{
    padding: 30rem 0 30rem 40rem;
    background-color: rgba(240, 242, 245, 1);
    // display: flex;
    // flex-direction: column;
}

.eloption .el-select-dropdown__wrap {
    background-color: bisque !important;
    max-height: 350px !important;
}
.custom-input {
    :deep(.el-input__wrapper) {
        height: 100%;
        box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;

        .el-input__inner {
            color: rgba(144, 147, 153, 1);
            font-size: 14rem;
            height: 40rem;
        }
    }

    :deep(.el-input__inner::placeholder) {
        color: rgba(144, 147, 153, 1);
        font-size: 14rem;
    }
}
.top {
    width: 1652rem;
    height: 40rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    .xyname,
    .ssdq {
        height: 16rem;
        margin-right: 35rem;
        font-size: 16rem;
        line-height: 16rem;
        color: rgba(96, 98, 102, 1);
    }

    .xysearch {
        width: 240rem;
        height: 40rem;
        margin-right: 42rem;
        background: #FFFFFF;
        border-radius: 4rem 4rem 4rem 4rem;
        opacity: 1;
        border: 1rem solid #DCDFE6;

        :deep(.el-select__input) {
            color: rgba(144, 147, 153, 1);
        }

        :deep(.el-input) {
            width: 240rem;
            height: 40rem;
        }

    }

    .dqsearch {
        width: 160rem;
        height: 40rem;
        margin-right: 42rem;
        background: #FFFFFF;
        border-radius: 4rem 4rem 4rem 4rem;
        opacity: 1;
        border: 1rem solid #DCDFE6;
    }
}
.middle {
    width: 1652rem;
    padding-top: 17rem;
    position: relative;
    display: flex;
    flex-flow: row nowrap;

    .jrtitle {
        height: 20rem;
        font-size: 20rem;
        font-weight: bold;
        color: #303133;
        line-height: 20rem;
        position: absolute;
        top: 30rem;
        left: 30rem;

    }

    .jrqfsj {
        width: 726rem;
        height: 403rem;
        background: #FFFFFF;
        border-radius: 15rem 15rem 15rem 15rem;
        opacity: 1;
        position: relative;

        .jr-chart {
            width: 726rem;
            height: 350rem;
            position: absolute;
            top: 50rem;
        }

        .jrtotal {
            width: 200rem;
            position: absolute;
            top: 187rem;
            left: calc(50% - 100rem);
            text-align: center;

            .jrnum {
                width: 100%;
                font-size: 30rem;
                line-height: 50rem;
                color: #2EC8ED;
            }

            .jrtext {
                width: 100%;
                font-size: 14rem;
                line-height: 14rem;
                color: #606266;
                margin-top: 8rem;
            }
        }
    }

    .jrlqsj {
        width: 906rem;
        height: 403rem;
        background: #FFFFFF;
        border-radius: 15rem 15rem 15rem 15rem;
        opacity: 1;
        position: relative;
        margin-left: 20rem;

        .lqlist {
            width: 846rem;
            height: 290rem;
            position: absolute;
            top: 80rem;
            left: calc(50% - 423rem);
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;

            .lqitem {
                width: 270rem;
                height: 136rem;
                border-radius: 10rem;
                opacity: 1;
                position: relative;

                .icon {
                    width: 11rem;
                    height: 11rem;
                    border-radius: 50%;
                    opacity: 1;
                    position: absolute;
                    top: 55rem;
                    left: 30rem;
                }

                .num {
                    height: 24rem;
                    font-size: 24rem;
                    font-weight: bold;
                    color: #1989FA;
                    line-height: 24rem;
                    position: absolute;
                    top: 48rem;
                    left: 51rem;
                }

                .status {
                    height: 14rem;
                    font-size: 14rem;
                    color: rgba(96, 98, 102, 1);
                    line-height: 14rem;
                    position: absolute;
                    top: 81rem;
                    left: 51rem;
                }
            }
        }
    }
}
.bottom {
    width: 1652rem;
    padding-top: 30rem;
    position: relative;

    .btitle {
        height: 20rem;
        font-size: 20rem;
        font-weight: bold;
        color: #303133;
        line-height: 20rem;
    }

    .qfyl {
        width: 1652rem;
        // height: 422rem;
        margin-top: 20rem;
        background: #FFFFFF;
        border-radius: 15rem;
        opacity: 1;
        position: relative;

        .qflist-wrap {
            width: 100%;
            // height: 350rem;

            .qfstatuslist {
                height: 33rem;
                // position: absolute;
                padding-top: 24rem;
                padding-left: 30rem;
                display: flex;
                flex-flow: row nowrap;

                .item {
                    height: 33rem;
                    font-size: 15rem;
                    font-weight: bold;
                    color: #303133;
                    line-height: 33rem;
                    margin-right: 42rem;
                    cursor: pointer;
                }

                .active {
                    color: rgba(25, 137, 250, 1);
                    border-bottom: 1px solid rgba(25, 137, 250, 1);
                }
            }

            .qflist {
                width: 1608rem;
                // height: 280rem;
                // position: absolute;
                padding-top: 20rem;
                padding-left: 28rem;
                display: flex;
                flex-flow: row wrap;
                overflow: auto;

                .item {
                    width: 189rem;
                    height: 134rem;
                    border-radius: 6rem;
                    margin-bottom: 12rem;
                    margin-right: 12rem;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    position: relative;

                    .room {
                        height: 15rem;
                        font-size: 15rem;
                        line-height: 15rem;
                        font-weight: bold;
                        color: #01474F;
                        position: absolute;
                        top: 14rem;
                        left: 14rem;

                        span {
                            height: 14rem;
                            font-size: 14rem;
                            font-weight: normal;
                        }
                    }

                    .icon {
                        width: 28rem;
                        height: 28rem;
                        position: absolute;
                        top: 96rem;
                        left: 151rem;
                        cursor: pointer;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .avatar {
                        width: 33rem;
                        height: 33rem;
                        background: #FFFFFF;
                        border-radius: 50%;
                        opacity: 1;
                        position: absolute;
                        bottom: 14rem;
                        left: 14rem;
                        overflow: hidden;

                    }

                    .name {
                        height: 13rem;
                        font-size: 13rem;
                        font-weight: bold;
                        color: rgba(188, 130, 90, 1);
                        position: absolute;
                        bottom: 32rem;
                        left: 52rem;
                    }

                    .time {
                        height: 12rem;
                        font-size: 12rem;
                        font-weight: bold;
                        color: rgba(188, 130, 90, 1);
                        position: absolute;
                        bottom: 15rem;
                        left: 52rem;
                    }

                    .building {
                        height: 14rem;
                        font-size: 14rem;
                        line-height: 14rem;
                        color: #468889;
                        position: absolute;
                        top: 43rem;
                        left: 14rem;
                    }
                }
                .data-empty{
                    font-size: 14px;
                    color:#909399;
                    text-align: center;
                    width: 100%;
                }
            }
        }

        .bottom-page {
            width: 100%;
            height: 30rem;
            margin-top: 22rem;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;

            :deep(.el-pagination) {
                width: 800rem;
                height: 100%;
                color: rgba(96, 98, 102, 1);

                .el-pagination__total {
                    color: rgba(96, 98, 102, 1);
                    font-size: 14rem;

                }

                .el-input__inner {
                    height: 28rem;
                }

                .btn-prev {
                    width: 30rem;
                    height: 30rem;
                    background: #F0F2F5;
                    border-radius: 2rem 2rem 2rem 2rem;
                    opacity: 1;

                    .el-icon {
                        color: #606266;
                    }
                }

                .btn-next {
                    width: 30rem;
                    height: 30rem;
                    background: #F0F2F5;
                    border-radius: 2rem 2rem 2rem 2rem;
                    opacity: 1;

                    .el-icon {
                        color: #606266;
                    }
                }

                .el-pager li {
                    min-width: 30rem; //一定要加！不然默认的宽度是32px
                    width: 30rem;
                    height: 30rem;
                    font-size: 14rem;
                    font-weight: bold;
                    border-radius: 4rem;
                    color: rgba(96, 98, 102, 1); //字体颜色
                    background: #F0F2F5; //背景色
                    line-height: 30rem;
                    margin: 0 10rem;

                    &.active {
                        //选中时字体颜色、背景色变化
                        color: rgba(255, 255, 255, 1);
                        background: #1989FA;
                    }
                }

                .el-pager .is-active {
                    color: rgba(255, 255, 255, 1);
                    background: #1989FA;
                }

                .el-pagination__jump .el-pagination__goto {
                    color: rgba(96, 98, 102, 1);
                }

                .el-pagination__jump .el-pagination__classifier {
                    color: rgba(96, 98, 102, 1);
                }

            }

            :deep(.el-input__wrapper) {
                height: 100%;
                border: 1rem solid #DCDFE6;
                box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
                cursor: default;

                .el-input__inner {
                    color: rgba(96, 98, 102, 1);
                }
            }
        }
    }


}
</style>
